<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: bo
  Date: 2015/7/25
  Time: 16:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<base href="<%=basePath%>">
<html>
<head>
  <meta charset="utf-8">
  <title>Free HTML5 Bootstrap Admin Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Charisma, a fully featured, responsive, HTML5, Bootstrap admin template.">
  <meta name="author" content="Muhammad Usman">

  <!-- The styles -->
  <link id="bs-css" href="../../css/bootstrap-cerulean.min.css" rel="stylesheet">
  <link href="../../css/charisma-app.css" rel="stylesheet">
  <link href='../../bower_components/fullcalendar/dist/fullcalendar.css' rel='stylesheet'>
  <link href='../../bower_components/fullcalendar/dist/fullcalendar.print.css' rel='stylesheet' media='print'>
  <link href='../../bower_components/chosen/chosen.min.css' rel='stylesheet'>
  <link href='../../bower_components/colorbox/example3/colorbox.css' rel='stylesheet'>
  <link href='../../bower_components/responsive-tables/responsive-tables.css' rel='stylesheet'>
  <link href='../../bower_components/bootstrap-tour/build/css/bootstrap-tour.min.css' rel='stylesheet'>
  <link href='../../css/jquery.noty.css' rel='stylesheet'>
  <link href='../../css/noty_theme_default.css' rel='stylesheet'>
  <link href='../../css/elfinder.min.css' rel='stylesheet'>
  <link href='../../css/elfinder.theme.css' rel='stylesheet'>
  <link href='../../css/jquery.iphone.toggle.css' rel='stylesheet'>
  <link href='../../css/uploadify.css' rel='stylesheet'>
  <link href='../../css/animate.min.css' rel='stylesheet'>

  <!-- jQuery -->
  <script src="bower_components/jquery/jquery.min.js"></script>

  <!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <!-- The fav icon -->
  <link rel="shortcut icon" href="img/favicon.ico">
</head>
<body>
<div class="row">
  <div class="box col-md-12">
    <div class="box-inner">
      <div class="box-header well" data-original-title="">
        <h2><i class="glyphicon glyphicon-user"></i> Datatable + Responsive</h2>

        <div class="box-icon">
          <a href="#" class="btn btn-setting btn-round btn-default"><i class="glyphicon glyphicon-cog"></i></a>
          <a href="#" class="btn btn-minimize btn-round btn-default"><i
                  class="glyphicon glyphicon-chevron-up"></i></a>
          <a href="#" class="btn btn-close btn-round btn-default"><i class="glyphicon glyphicon-remove"></i></a>
        </div>
      </div>
      <div class="box-content">
        <table class="table table-striped table-bordered responsive">
          <thead>
          <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>创建时间</th>
            <th>描述</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <c:forEach var="role" items="${roles}">
            <tr>
              <td>${role.id}</td>
              <td class="center">${role.name}</td>
              <td class="center">${role.createTime}</td>
              <td class="center">${role.desc}</td>
                <%--<td class="center">--%>
                <%--<span class="label-success label label-default">Active</span>--%>
                <%--</td>--%>
              <td class="center">
                <a class="btn btn-success" data-toggle="modal"
                   data-target="#myModal">
                  <i class="glyphicon glyphicon-zoom-in icon-white"></i>
                  View
                </a>
                <a class="btn btn-info" onclick="modify(this)">
                  <i class="glyphicon glyphicon-edit icon-white"></i>
                  Modify
                </a>
                <a class="btn btn-danger" data-toggle="modal" data-target="#myModal">
                  <i class="glyphicon glyphicon-trash icon-white"></i>
                  Delete
                </a>
              </td>
            </tr>
          </c:forEach>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <!--/span-->
</div><!--/row-->

<!-- 模态框（Modal） -->
<div class="modal fade" id="modify" tabindex="-1" role="admin"
     aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close"
                data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
        <h4 class="modal-title" id="myModalLabel">
          修改资源
        </h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form" action="role/modify.htm">
          <div class="form-group">
            <label class="control-label">编号: </label>
            <input id="id" name="id" type="text" readonly="readonly">
          </div>
          <div class="form-group">
            <label class="control-label">名称: </label>
            <input id="name" name="name" type="text">
          </div>
          <div class="form-group">
            <label class="control-label">创建时间: </label>
            <input id="createTime" name="createTime" type="text" >
          </div>
          <div class="form-group">
            <label class="control-label">描述: </label>
            <input id="desc" name="desc" type="text" >
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default"
                    data-dismiss="modal">关闭
            </button>
            <button type="submit" class="btn btn-primary">
              提交更改
            </button>
          </div>
        </form>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal -->
</div>

<script>
  function modify(obj) {
    var tds = $(obj).parent().parent().find("td");
    $("#id").val(tds.eq(0).text());
    $("#name").val(tds.eq(1).text());
    $("#createTime").val(tds.eq(2).text());
    $("#desc").val(tds.eq(3).text());
    $("#modify").modal();
  }
</script>

<!-- external javascript -->
<script src="../../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- library for cookie management -->
<script src="../../js/jquery.cookie.js"></script>
<!-- calender plugin -->
<script src='../../bower_components/moment/min/moment.min.js'></script>
<script src='../../bower_components/fullcalendar/dist/fullcalendar.min.js'></script>
<!-- data table plugin -->
<script src='../../js/jquery.dataTables.min.js'></script>

<!-- select or dropdown enhancer -->
<script src="../../bower_components/chosen/chosen.jquery.min.js"></script>
<!-- plugin for gallery image view -->
<script src="../../bower_components/colorbox/jquery.colorbox-min.js"></script>
<!-- notification plugin -->
<script src="../../js/jquery.noty.js"></script>
<!-- library for making tables responsive -->
<script src="../../bower_components/responsive-tables/responsive-tables.js"></script>
<!-- tour plugin -->
<script src="../../bower_components/bootstrap-tour/build/js/bootstrap-tour.min.js"></script>
<!-- star rating plugin -->
<script src="../../js/jquery.raty.min.js"></script>
<!-- for iOS style toggle switch -->
<script src="../../js/jquery.iphone.toggle.js"></script>
<!-- autogrowing textarea plugin -->
<script src="../../js/jquery.autogrow-textarea.js"></script>
<!-- multiple file upload plugin -->
<script src="../../js/jquery.uploadify-3.1.min.js"></script>
<!-- history.js for cross-browser state change on ajax -->
<script src="../../js/jquery.history.js"></script>
<!-- application script for Charisma demo -->
<script src="../../js/charisma.js"></script>
</body>
</html>
